<!-- 首页二级页面 -->
<template>
  <view>
   <view class="topBox">
     <!-- 摄像头接入 -->
          <video id="myVideo" class="videoBox" autoplay :src="VideoUrl" controls></video>

   </view>
   <view class="tit1">实时监控</view>
     <scroll-view scroll-x="true" class="jiankong">
      <view v-for="item in 5" :key="item.index" class="jiankongBox">
        <!-- {{item}} -->
        <video id="myVideo" class="videoBox" :src="VideoUrl" ></video>
      </view>
     </scroll-view>
     <!-- 地块信息 -->
     <view class="areaData">
       <view class="areaTit">
         基本信息
       </view>
       <view class="areaBox">
         <view class="txt">
           所处区域：{{areaData.name}}
         </view>
         <view class="txt">
           种植时间：{{areaData.maturityTime}}
         </view>
         <view class="txt">
           预计成熟时间：{{areaData.plantingTime}}
         </view>
         <view class="areaImgBox">
           <view v-for="item in pic" :key="item.index" class="imgBox">
             <image :src='item' mode=""></image>
           </view>
         </view>
       </view>
       <image src="../../static/images/greenkuang.png" mode="" class="areabg"></image>
     </view>
     <!-- 气象标题 -->
     <view class="tit2">
       <view class="titText">
         气象站  <text>·在线</text>
       </view>
       <view class="titTime">
         更新时间：12：15
       </view>
     </view>
     <!-- 气象盒子 -->
     <view class="weatherBox">
       <view  v-for="item in weatherRes" :key="item.index" class="box" >
         <view class="box-l">
           <view class="Tit">
            {{ item.wtName}}
           </view>
           <view class="Txt">
             {{item.wtNum}}{{item.com}}
           </view>
         </view>
         <view class="box-r">
           <view class="t-icon" :class="item.icon">
           </view>
         </view>
       </view>
     </view>
     <view class="tit2">
       土壤墒情
     </view>
     <!-- 土地盒子 -->
     <view class="weatherBox">
       <view  v-for="item in landRes" :key="item.index" class="box">
         <view class="box-l">
           <view class="Tit">
            {{ item.wtName}}
           </view>
           <view class="Txt">
             {{item.wtNum}}
           </view>
         </view>
         <view class="box-r">
           <view class="t-icon" :class="item.icon">
           </view>
         </view>
       </view>
     </view>
  </view>
</template>

<script>
  import {getSensorDataApi,getVideoUrlApi,getLandListApi} from '@/api/index.js'
  export default {
    data() {
      return {
        weatherRes:[
          {wtName:"空气温度",wtNum:"",icon:'t-icon-daqiwendu',com:'℃'},
          {wtName:"空气湿度",wtNum:"",icon:'t-icon-wenshidu',com:'%RH'},
          {wtName:"紫外线",wtNum:"",icon:'t-icon-guangzhao',com:'UVI'},
          {wtName:"光照强度",wtNum:"",icon:'t-icon-guangzhao',com:'Lux'},
          {wtName:"风速",wtNum:"",icon:'t-icon-fengsu',com:'m/s'},
          {wtName:"风向",wtNum:"",icon:'t-icon-fengxiang',com:''}
        ],
        landRes:[
          {wtName:"土壤温度",wtNum:"",icon:'t-icon-turangwendu'},
          {wtName:"土壤湿度",wtNum:"",icon:'t-icon-turangshidu'},
          {wtName:"电导率",wtNum:"",icon:'t-icon-turangdiandaoshuai'},
          {wtName:"土壤氮",wtNum:"",icon:'t-icon-youjizhi'},
          {wtName:"土壤磷",wtNum:"",icon:'t-icon-youjizhi'},
          {wtName:"土壤钾",wtNum:"",icon:'t-icon-youjizhi'}
        ],
        pic:[
          '../../static/images/pic1.jpg',
          '../../static/images/pic2.jpg',
          '../../static/images/pic3.jpg'
        ],
        areaData:'',
        VideoUrl:'',
        getApiId:''
      }
    },
    methods: {
        statechange(e){
                  console.log('live-player code:', e.detail.code)
              },
              error(e){
                  console.error('live-player error:', e.detail.errMsg)
              },
             async getVideoUrl(deviceId) {
                const VideoUrl =  await getVideoUrlApi(deviceId)
                // console.log(VideoUrl);
                this.VideoUrl = VideoUrl
          },
          // 传感器接口
          async getSensorData() {
                const res = await getSensorDataApi()
                console.log(res);
                // console.log(res[5].jsonObject.data[1].传感器D2);
                // console.log(res[5].jsonObject.data[1].传感器D3);
                const weatherData = res[5].jsonObject.data[1].传感器D2
                const landData = res[5].jsonObject.data[1].传感器D3
                this.weatherRes[0].wtNum = weatherData[5].appValue
                this.weatherRes[1].wtNum = weatherData[6].appValue
                this.weatherRes[2].wtNum = weatherData[4].appValue
                this.weatherRes[3].wtNum = weatherData[3].appValue
                this.weatherRes[4].wtNum = weatherData[1].appValue
                this.weatherRes[5].wtNum = weatherData[0].appValue
                
                 for (let i = 0; i< this.landRes.length;i++) {
                   this.landRes[i].wtNum = landData[i].appValue + landData[i].com
                }
          },
          // 地块信息
          async getLandList(id) {
            const res = await getLandListApi(id)
            this.areaData = res[0]
          }
    },
    mounted() {
      this.getVideoUrl('AB5223890')
      this.getSensorData()
      this.getLandList(this.getApiId)
    },
    onLoad(query) {
       this.getApiId = query.id;
     }
  }
</script>

<style lang="scss">
page {
  background: #e1f3eb;
  height: 1500rpx;
  width: 100%;
  padding: 0 26rpx;
  box-sizing: border-box;
}
// iconFont大小
.t-icon {
  width: 50rpx;
  height: 50rpx;
}
.topBox {
  width: 696rpx;
  height: 398rpx;
  background-color: #fff;
  border-radius: 20rpx;
  margin-top: 30rpx;
  box-shadow: 5rpx 5rpx 5rpx;
  overflow: hidden;
  #myVideo {
    width: 696rpx;
    height: 398rpx;
  }
}
.tit1 {
  margin-top: 40rpx;
  margin-bottom: 20rpx;
}
.jiankong {
  white-space: nowrap;
  .jiankongBox {
    display: inline-block;
    width: 240rpx;
    height: 158rpx;
    box-shadow: 5rpx 5rpx 10rpx rgba(0, 0, 0, 0.3);
    background-color: #fff;
    border-radius: 15rpx;
    margin-right: 15rpx;
    margin-bottom: 10rpx;
    video {
      width: 240rpx;
      height: 158rpx;
      argin-bottom: 10rpx;
      border-radius: 15rpx;
      overflow: hidden;
    }
  }
}
  .areaTit {
    width: 200rpx;
    height: 30rpx;
    line-height: 30rpx;
    padding-left:15rpx ;
    border-left:3px solid #64c0b1 ;
    margin-bottom: 20rpx;
  }
.areaData {
  margin: 20rpx 0;
.areaBox {
  width: 688rpx;
  height: 370rpx;
  border: 1px solid #64c0b1;
  border-radius: 15rpx;
  background-color: #fff;
  padding: 26rpx 16rpx;
  .txt {
    color: #a3a3a3;
    margin-top: 10rpx;
  }
  .areaImgBox {
    display: flex;
    justify-content: space-between;
    margin-top: 30rpx;
    .imgBox {
      width: 210rpx;
      height: 136rpx;
      background-color: #fff;
      border: 1px solid #64c0b1;
      border-radius: 15rpx;
      image {
        width: 210rpx;
        height: 136rpx;
      }
    }
  }
}

  .areabg {
    width: 100%;
    height: 200rpx;
  }
}

.tit2 {
 color: #64c0b1;  
 font-size: 32rpx;
 font-weight: 700;
 margin-top: 30rpx;
 margin-bottom: 20rpx;
 text {
   margin-left: 20rpx;
 }
 .titTime {
   font-size: 24rpx;
   color: #ccc;
   font-weight: normal;
   margin-top: 20rpx;
 }
}
// 气象和土壤盒子
.weatherBox {
  width: 100%;
  height: 700rpx;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  .box {
    width: 314rpx;
    height: 194rpx;
    background-color: #fff;
    border-radius: 15rpx;
    box-shadow: 6rpx 5rpx 10rpx rgba(0,0,0,0.3);
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    .box-l {
      margin: 20rpx 40rpx 0 26rpx;
      width: 140rpx;
      .Tit {
        margin-bottom: 25rpx;
        font-weight: 700;
      }
      .Txt {
        color: #64c0b1;
      }
    }
    .box-r {
      background-color: #ebf1f7;
      width: 80rpx;
      min-width: 80rpx;
      height: 80rpx;
      text-align: center;
      padding: 15rpx 0;
      margin: auto;
      border-radius: 50%;
    }
  }
}
</style>
